<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      rel="shortcut icon"
      href="http://www.mobiletrain.org/favicon.ico"
      type="image/x-icon"
    />
    <link
      rel="stylesheet"
      href="http://at.alicdn.com/t/font_2989423_wcg2wl0kqig.css"
    />
    <link rel="stylesheet" href="./assets/css/index.css" />
    <link rel="stylesheet" href="./assets/css/player.css" />
    <title>🎸🎙🎷🎤千锋云音乐🎵</title>
  </head>

  <body>
    <!-- captcha -->
    <section class="captcha" style="visibility: hidden;">
      <h2>
        <span>行为验证码</span>
        <i class="iconfont icon-close"></i>
      </h2>
      <div class="check">
        <img src="./assets/imgs/captcha.jpeg" alt="" />
        <img src="./assets/imgs/captcha_zfx.png" alt="" />
      </div>
      <div class="drag">
        <div class="btn"></div>
      </div>
    </section>
    <!-- captcha -->

    <!-- login -->
    <section class="login" style="visibility: hidden;">
      <div class="item">
        <div class="menu"></div>
        <div class="form">
          <p class="close"><i class="iconfont icon-close"></i></p>
          <p class="font">登录/注册</p>
          <input type="text" class="mobile" placeholder="请输入手机号" />
          <!-- <p class="msg">请输入手机号</p> -->
          <p class="msg"></p>
          <input
            type="text"
            class="password"
            placeholder="请输入验证码"
            maxlength="4"
          />
          <!-- <p class="msg">请输入手机号</p> -->
          <p class="msg"></p>
          <button class="captcha">获取验证码</button>
          <button class="submit">登录/注册</button>
        </div>
      </div>
    </section>
    <!-- login -->

    <!-- backTop -->
    <img src="./assets/imgs/goTop.png" class="backTop" />
    <!-- backTop -->

    <!-- 头 -->
    <header>
      <section>
        <img class="logo" src="./assets/logo.png" alt="logo" />

        <ul class="navs">
          <li><a href="./index.html">首页</a></li>
          <li><a href="./song.html">歌单</a></li>
          <li class="active"><a href="./player.html">🎵音乐盒</a></li>
          <li><a href="./video.html">🎬小视频</a></li>
        </ul>

        <div class="member">
          <input type="text" placeholder="请输入歌名、歌词、歌手或专辑" />
          <i class="iconfont icon-sousuo"></i>
          <!-- <img src="./assets/imgs/avatar.webp" alt="avatar"> -->
          <div><span>登录</span> <span>/</span> <span>注册</span></div>
        </div>
      </section>
    </header>
    <!-- /头 -->

    <!-- 主体 -->
    <section class="music">
      <div class="list">
        <h2>播放列表</h2>
        <div class="row">
          <span>#</span><span>歌曲</span><span>歌手</span><span>专辑</span
          ><span>时长</span>
        </div>
        <!-- content -->
        <div class="content">
          <!-- div.row*29>span{$}+span{感恩的心$}+span{姜育恒$}+span{遇恒牵情 $$$$$加值版}+span{05:$$} -->
          <!-- <div class="row" style="color:rgb(6, 137, 212)"><span><i class="playing line1"></i> <i class="playing line2"></i> <i class="playing line3"></i></span><span>参考</span><span>参考</span><span>参考 参考</span><span>00:00</span></div> -->
          <div class="row" name="seven">
            <span>1</span><span>七里香</span><span>周杰伦 (Jay Chou)</span
            ><span>抖音热歌</span><span>04:00</span>
          </div>
          <div class="row" name="taiyangren">
            <span>2</span><span>太阳人</span><span>中央少年广播合唱团</span
            ><span>太阳人</span><span>03:12</span>
          </div>
          <div class="row" name="black">
            <span>3</span><span>夜空最亮的星</span><span>逃跑计划</span
            ><span>逃跑计划</span><span>04:12</span>
          </div>
          <div class="row" name="diqiumama">
            <span>4</span><span>地球妈妈别哭泣</span
            ><span>中央少年广播合唱团</span><span>地球妈妈别哭泣</span
            ><span>04:04</span>
          </div>

          <div class="row" name="seven">
            <span>1</span><span>七里香</span><span>周杰伦 (Jay Chou)</span
            ><span>抖音热歌</span><span>04:00</span>
          </div>
          <div class="row" name="taiyangren">
            <span>2</span><span>太阳人</span><span>中央少年广播合唱团</span
            ><span>太阳人</span><span>03:12</span>
          </div>
          <div class="row" name="black">
            <span>3</span><span>夜空最亮的星</span><span>逃跑计划</span
            ><span>逃跑计划</span><span>04:12</span>
          </div>
          <div class="row" name="diqiumama">
            <span>4</span><span>地球妈妈别哭泣</span
            ><span>中央少年广播合唱团</span><span>地球妈妈别哭泣</span
            ><span>04:04</span>
          </div>

          <div class="row" name="seven">
            <span>1</span><span>七里香</span><span>周杰伦 (Jay Chou)</span
            ><span>抖音热歌</span><span>04:00</span>
          </div>
          <div class="row" name="taiyangren">
            <span>2</span><span>太阳人</span><span>中央少年广播合唱团</span
            ><span>太阳人</span><span>03:12</span>
          </div>
          <div class="row" name="black">
            <span>3</span><span>夜空最亮的星</span><span>逃跑计划</span
            ><span>逃跑计划</span><span>04:12</span>
          </div>
          <div class="row" name="diqiumama">
            <span>4</span><span>地球妈妈别哭泣</span
            ><span>中央少年广播合唱团</span><span>地球妈妈别哭泣</span
            ><span>04:04</span>
          </div>
        </div>
        <!-- content -->
      </div>
      <div class="cover">
        <img src="./assets/mp3/imgs/seven.jpeg" alt="" />
        <div class="content">
          <ul>
            <!-- <li>歌词搜索中...</li> -->
          </ul>
        </div>
      </div>
    </section>
    <!-- /主体 -->

    <!-- player -->
    <section class="player">
      <div class="play-bar">
        <div class="progress"></div>
        <div class="bar"></div>
      </div>
      <div class="play-box">
        <div class="info">
          <img src="./assets/mp3/imgs/seven.jpeg" alt="" />
          <span>七里香 - 周杰伦</span>
          <i class="iconfont icon-aixin"></i>
          <i class="iconfont icon-yunduanxiazai"></i>
          <i class="iconfont icon-fenxiang share"></i>
        </div>
        <div class="play">
          <i class="iconfont icon-xiayishou"></i>
          <div class="play-pause-box">
            <i class="iconfont icon-24gl-play"></i>
            <i class="iconfont icon-24gl-pause2" style="display: none;"></i>
          </div>
          <i class="iconfont icon-xiayishou"></i>
        </div>
        <div class="playbar-right">
          <span class="times"
            ><span class="current">00:00</span>&nbsp;/&nbsp;<span
              class="duration"
              >05:03</span
            ></span
          >
          <div class="volume">
            <i class="iconfont icon-laba"></i>
            <div class="progress"></div>
            <div class="bar"></div>
          </div>
        </div>
      </div>

      <!-- music -->
      <video src="./assets/mp3/seven.mp3" style="display:none"></video>
    </section>
    <!-- /player -->

    <!-- share -->
    <input type="text" class="share-content" value="./player.html" />
    <!-- share -->

    <script src="./assets/js/login.js"></script>
    <script src="./assets/js/nprogress.js"></script>
    <script src="./assets/js/player.js"></script>
  </body>
</html>
